Wrap alert text content in <p> to fix flex gap issue and improve semantics#42175
Wrap alert text content in <p> to fix flex gap issue and improve semantics#42175
<p> to fix flex gap issue and improve semantics#42175Conversation
| @include border-radius(var(--alert-border-radius)); | ||
| } | ||
|
|
||
| .alert > p { |
There was a problem hiding this comment.
We could also use .mb-0 in code snippets.
There was a problem hiding this comment.
+1 in favor of .mb-0 for the docs, if this is how it's used in other areas. It's very explicit and can be easly removed.
That way, if someone prefers something like margin: 1rem for all their p elements (this could be done to decorate paragraphs in a certain way), it won't be affected by the .alert > p rule, which in the case of this commit, only resets the bottom margin.
julien-deramond
force-pushed
the
v6-dev-fix-gap-issues-with-alerts
branch
from
a12c031 to
f634ca0
Compare
|
If there's an accessibility gain, then indeed we should use a Perhaps this is something should be considered though: #42175 (comment) I personally can't say whether the gap should be removed or not. Seems useful, but also "hidden". It's easy enough to reset/customize with A problem that I see if the gap doesn't get removed is that those who will migrate from v4 and v5, without this information being mentioned somewhere (Migration perhaps?), will be affected by this issue. |
mdo
force-pushed
the
v6-dev-fix-gap-issues-with-alerts
branch
from
f634ca0 to
92a5b33
Compare
3 participants
Description
This PR fixes #42162.
There are several possible ways to address this issue; this PR proposes one approach.
As long as flex continues to be used in this way in v6, wrapping the text content resolves the issue observed in the documentation (and similar cases). In my opinion, this is not merely a workaround: our alerts could also benefit from the
<p>semantics for accessibility. This approach is used in Boosted v5 (a customized fork of Bootstrap) and has been reviewed and approved by accessibility experts within the company, even though it differs slightly from the approach used in Bootstrap 5.Checklist
js/tests/visual/alert.htmlRendering:
js/tests/visual/dropdown-submenu.htmlRendering:
scss/_alert.scsssite/src/assets/examples/cheatsheet/index.astroImproved rendering in terms of gaps.
site/src/assets/partials/snippets.jssite/src/content/docs/components/alert.mdxsite/src/content/docs/components/offcanvas.mdxsite/src/content/docs/customize/theme.mdxLive previews
Related issues
Closes #42162